<template>
    <div>
    <el-row>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="card-head-left">产品信息</span>&nbsp;&nbsp;&nbsp;
                <span class="card-head-right">(请上传或填写产品信息,上传信息请包括验货资料,如合同、装箱单、验货要求等)</span>
            </div>
            <div class="text item">
                <el-row>
                    <el-col :span="16">


                <el-row>

                    <el-col :span="8">
                        产品名称：
                        <el-input v-model="inspectionForm.product.name" placeholder="请输入产品名称"
                                  style="width:250px"></el-input>
                    </el-col>
                    <el-col :span="8">
                        产品货号：
                        <el-input v-model="inspectionForm.product.number" placeholder="请输入产品货号"
                                  style="width:250px"></el-input>
                    </el-col>
                    <el-col :span="1">
                        <i class="el-icon-circle-plus-outline" @click="addDomain" style="font-size:30px"></i>
                    </el-col>
                    <el-col :span="7">
                        <el-button @click="changeProductPO">{{productPO!='none'?"隐藏":"显示"}}</el-button>
                    </el-col>

                </el-row>
                <el-row style="margin-top: 20px" :style="{display:productPO}">
                    <el-col>
                        <el-form :model="inspectionForm.product" ref="inspectionForm" label-width="100px"
                                 class="demo-dynamic">
                            <el-form-item
                                v-for="(domain, index) in inspectionForm.product.domains"
                                :label="'PO号'"
                                :key="domain.key"
                                :prop="'domains.' + index + '.value'"
                            >
                                <el-input v-model="domain.number" placeholder="请输入PO号" style="width:150px"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-input v-model="domain.count" placeholder="请输入数量" style="width:150px"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="el-icon-remove-outline" @click.prevent="removeDomain(domain)" style="font-size:30px"></i>


                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                    </el-col>
                    <el-col :span="8" >
                        <el-row>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                上传到服务器</el-button>
                        </el-row>
                        <el-row>
                            <el-upload
                                class="upload-demo"
                                ref="upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :auto-upload="false"
                                drag
                                multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-row>
                    </el-col>
                </el-row>

            </div>

        </el-card>

    </el-row>
    <el-row>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="card-head-left">供应商信息</span>&nbsp;&nbsp;&nbsp;
            </div>
            <div class="text item">
                <el-row>
                    <el-form :model="inspectionForm.supplier" ref="inspectionForm" label-width="100px"
                             class="demo-dynamic">
                    <el-col :span="12">

                           <el-form-item label="供应商名称" prop="name">
                               <el-select v-model="inspectionForm.supplier.name" filterable placeholder="请选择">
                                   <el-option
                                       v-for="item in supplier.name"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                                   </el-option>
                               </el-select>
                           </el-form-item>

                            <el-form-item label="手机号码" prop="tele">
                                <el-input v-model="inspectionForm.supplier.tele" style="width:400px"></el-input>
                            </el-form-item>

                        <el-form-item label="验货地址：">
                            <el-select style="width: 200px"
                                       v-model="selectCountry"
                                       placeholder="请选择国家"
                                       v-on:change="getCountry($event)">
                                <el-option
                                    v-for="item in countrys"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select style="width: 200px"
                                       v-if="selectCountry!=''"
                                       v-model="selectCity"
                                       placeholder="请选择城市">
                                <el-option
                                    v-for="item in citys"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人姓名" prop="peopleName">
                            <el-input v-model="inspectionForm.supplier.peopleName" style="width:400px"></el-input>
                        </el-form-item>

                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="inspectionForm.supplier.email" style="width:400px"></el-input>
                        </el-form-item>


                        <el-form-item label="详细地址" prop="detailAddress">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入工厂详细地址"
                                v-model="inspectionForm.supplier.detailAddress" style="width:400px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    </el-form>
                </el-row>

            </div>

        </el-card>
    </el-row>
        <el-row>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span class="card-head-left">验货基本信息</span>&nbsp;&nbsp;&nbsp;
                </div>
                <div class="text item">
                    <el-row>
                        <el-form :model="inspectionForm.basicInformation " ref="inspectionForm" label-width="100px"
                                 class="demo-dynamic">
                            <el-col :span="8">
                            <el-form-item label="报告语言" prop="language">
                                <el-radio v-model="inspectionForm.basicInformation.language" label="中文">中文</el-radio>
                                <el-radio v-model="inspectionForm.basicInformation.language" label="英文">英文</el-radio>
                            </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="报告份数" prop="number">
                                    <el-input-number v-model="inspectionForm.basicInformation.number" :min="1" >
                                    </el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>

                </div>

            </el-card>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "inspection",
        data() {
            return {
                productPO: 'block',
                supplier: {
                        name: [
                            {
                            value: 1,
                            label: '联想'
                        },
                            {
                                value: 2,
                                label: '惠普'
                            },
                            {
                                value: 3,
                                label: '华硕'
                            },
                        ],
                },
                inspectionForm: {
                    product: {
                        name: '',
                        number: '',
                        domains: [{
                            number: '',
                            count: '',
                        }],
                    },
                    supplier:{
                        name:'',
                        tele:'',
                        address:'',
                        peopleName:'',
                        email:'',
                        detailAddress:'',

                    },
                    basicInformation: {
                        language: '中文',
                        number: '',

                    },
                },
                countrys:[{label:"中国",value:"中国"},{label:"美国",value:"美国"},{label:"英国",value:"英国"},],
                citys: [],
                selectCountry: '',
                selectCity: '',

            }
        },
        created() {

        },
        methods: {
            removeDomain(item) {
                var index = this.inspectionForm.product.domains.indexOf(item)
                if (index !== -1) {
                    this.inspectionForm.product.domains.splice(index, 1)
                }
            },
            addDomain() {
                this.inspectionForm.product.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            changeProductPO() {
                if (this.productPO == 'none') {
                    this.productPO = 'block';
                } else {
                    this.productPO = 'none';
                }
            },
            submitUpload() {
                console.log(this.fileList);
                this.$refs.upload.submit();
            },
            getCountry: function (prov) {
                let tempCity=[];
                this.citys=[];
                this.selectCity='';
                let allCity=[
                    {
                        prov: "中国",
                        label: "北京市"
                    }, {
                        prov: "中国",
                        label: "上海市"
                    },
                    {
                        prov: "中国",
                        label: "天津市"
                    }, {
                        prov: "美国",
                        label: "纽约"
                    },
                    {
                        prov: "美国",
                        label: "华盛顿"
                    }, {
                        prov: "美国",
                        label: "芝加哥"
                    },
                    {
                        prov: "英国",
                        label: "伦敦"
                    }, {
                        prov: "英国",
                        label: "爱丁堡"
                    }];
                for (var val of allCity){
                    if (prov === val.prov){
                        tempCity.push({label: val.label, value: val.label})
                    }
                }
                this.citys = tempCity;
            },

            a() {
                alert(1)
            }
        },


    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 90%;
        margin-bottom: 20px;
    }

    .card-head-left {
        font-size: 20px;
        color: #45a512;
    }

    .card-head-right {
        color: #918da5;
        font-size: 5px;
    }

</style>
